<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('编辑数据源')"/>
    <style>

        .layui-input-wrap .layui-form-checkbox{
            margin-top: 0 !important;
            padding-left: 0 !important;
            display: inline-block;

        }
        .extend .layui-input-suffix{
            width: 70px;
            pointer-events: auto !important;
        }
        .layui-input-wrap .layui-form-checkbox div{
            padding-right: 0 !important;
        }
    </style>
</head>
<body>
    <form class="layui-form" action="" onsubmit="return false">
        <div class="mainBox">
            <div class="main-container">
                <div class="layui-form-item">
                    <label class="layui-form-label">连接名</label>
                    <div class="layui-input-block">
                        <input type="hidden" name="id" th:value="${dataSource.id}" />
                        <input type="text" name="connName" th:value="${dataSource.connName}" required  lay-verify="required" lay-affix="clear" placeholder="请输入连接名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">数据库类型</label>
                    <div class="layui-input-block">
                        <select name="dbType" lay-verify="required" lay-filter="selected" lay-search>
                            <option value=""></option>
                            <option value="MySQL" th:selected="${dataSource.dbType == 'MySQL'}">MySQL</option>
                            <option value="Oracle" th:selected="${dataSource.dbType == 'Oracle'}">Oracle</option>
                            <option value="SQLServer" th:selected="${dataSource.dbType == 'SQLServer'}">SQLServer</option>
                            <option value="PostgreSQL" th:selected="${dataSource.dbType == 'PostgreSQL'}">PostgreSQL</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item " name="fillIn">
                    <label class="layui-form-label">IP地址</label>
                    <div class="layui-input-block layui-input-wrap extend">
                        <input type="text" name="ip" required  th:value="${dataSource.ip}"  lay-verify="required" lay-affix="clear" placeholder="请输入IP地址" autocomplete="off" class="layui-input">
                        <div class="layui-input-suffix">
                            <input type="checkbox" name="defaultIp" lay-filter="defaultIp" title="默认">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item " name="fillIn">
                    <label class="layui-form-label">端 口 号</label>
                    <div class="layui-input-block layui-input-wrap extend">
                        <input type="text" name="port" required  th:value="${dataSource.port}" lay-verify="required" lay-affix="clear" placeholder="请输入端口" autocomplete="off" class="layui-input">
                        <div class="layui-input-suffix">
                            <input type="checkbox" name="defaultPort" lay-filter="defaultPort" title="默认">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item " name="fillIn">
                    <label class="layui-form-label">数据库名</label>
                    <div class="layui-input-block">
                        <input type="text" name="dbName" th:value="${dataSource.dbName}" required  lay-verify="required" lay-affix="clear" placeholder="请输入数据库命促" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item " name="fillIn">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block layui-input-wrap extend">
                        <input type="text" name="userName" required th:value="${dataSource.userName}" lay-verify="required" lay-affix="clear" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                        <div class="layui-input-suffix">
                            <input type="checkbox" name="defaultUser" lay-filter="defaultUser" title="默认">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item " name="fillIn">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block layui-input-wrap extend">
                        <input type="password" name="userPwd" required th:value="${dataSource.userPwd}" lay-verify="required" lay-affix="eye"  placeholder="请输入密码" autocomplete="off" class="layui-input">
                        <div class="layui-input-suffix">
                            <input type="checkbox" name="defaultPwd" lay-filter="defaultPwd" title="默认">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="pear-btn pear-btn-md pear-btn-radius pear-btn-primary " lay-submit lay-filter="source_edit_update">修改</button>
                        <button class="pear-btn pear-btn-md  pear-btn-radius" lay-on="close">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <th:block th:include="include :: footer"/>
    <script src="/admin/js/Constant.js" ></script>
    <script  th:inline="javascript">
        let MODULE_PATH = "/datasource/";
        let dbType = [[${dataSource.dbType}]];
        layui.use(['form','http','common','jquery','util'], function(){
            const form = layui.form;
            let http = layui.http;
            let common = layui.common;
            let $ = layui.jquery;
            let util = layui.util;
            let param = {
                ip:"",
                port:"",
                dbName:"",
                connUrl:""
            }
            function setUrl (param){
                let template = DBURL[dbType].url
                let connUrlStr = common.strFormart(template,param.ip,param.port,param.dbName)
                return connUrlStr
            }
            /**
             * 回显数据
             * @param name
             * @param value
             */
            function echoEle(name,value) {
                $("input[name='"+name+"']").val(value)
                form.render();
            }
            form.on("select(dbType)",function (data){
                console.log()
                if(data.value){
                    $("div[name='fillIn']").addClass("layui-show").removeClass("layui-hide")
                }else{
                    $("div[name='fillIn']").addClass("layui-hide").removeClass("layui-show")
                }
                dbType = data.value
            })

            form.on('checkbox(defaultIp)', function (data){
                let elem = data.elem
                let checked = elem.checked; // 获得 checkbox 选中状态
                if(checked){
                    param.ip = DBURL[dbType].defaultIp
                }else{
                    param.ip = ""
                }
                echoEle('ip',param.ip)
            });
            form.on('checkbox(defaultPort)', function(data){
                let elem = data.elem
                let checked = elem.checked;
                if(checked){
                    param.port = DBURL[dbType].defaultPort
                }else{
                    param.port = ""
                }
                echoEle('port',param.port)
            })
            form.on('checkbox(defaultUser)', function(data){
                let elem = data.elem
                let checked = elem.checked;
                if(checked){
                    param.userName = DBURL[dbType].defaultUser
                }else{
                    param.userName = ""
                }
                echoEle('userName',param.userName)
            })
            form.on('checkbox(defaultPwd)', function(data){
                let elem = data.elem
                let checked = elem.checked;
                if(checked){
                    param.userPwd = DBURL[dbType].defaultPwd
                }else{
                    param.userPwd = ""
                }
                echoEle('userPwd',param.userPwd)
            })
            form.on('submit(source_edit_update)', function(data){
                data.field.connUrl = setUrl(data.field)
                http.request({
                    url: MODULE_PATH+"update",
                    contentType: http.contentType.json,
                    data:data.field,
                    method:"put"
                }).then(res=>{
                    layer.msg(res.message,{icon:1,time:1000},function(){
                        parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页

                        // 向父窗口传递参数
                        //parent.setDbNameList(res.data)
                        parent.layui.table.reload("source-table");
                    });
                }).catch(e=>{
                    console.log(e)
                })
                return false;
            });
            util.on({
                close:function (){
                    parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                },
            })
        });
    </script>
</body>
</html>